<template>
	<view class="funds-status_wrapper">
		<!-- 页面导航栏 -->
		<view class="nav_bar">
			<view @click="jumpBack">
				<uni-icon type="back" size="24" color="#FFFFFF" style="margin-left:20upx;"></uni-icon>
			</view>
			<view class="nav_bar--title">冻结资金详情</view>
			<!-- {{showCheckBox?'完成':'批量'}} -->
			<view class="nav_bar--btn" @click="onBatchBtn"></view>
		</view>
		<!-- 切换tab -->
		<view class="menu_tab">
			<text :class="{'menu_tab--default':true,'menu_tab--active':menuActive === index}" v-for="(item,index) in menuList"
			 :key="index" @click="changeMenuTab(index)">
				{{item}}
			</text>
		</view>
		<!-- 可挖矿 -->
		<view class="list_wrap" v-if="menuActive == 0">
			<view class="list_header">
				<checkbox-group @change="chooseAllFunds">
					<checkbox value="0" :checked="allCheckboxStatus" class="check_box" v-if="showCheckBox" />
				</checkbox-group>
				<text>数额(PCD)</text>
				<text>时间</text>
				<text>操作</text>
			</view>
			<view class="list_content">
				<checkbox-group @change="chooseSingleFunds">
					<view class="list_content--item" v-for="(item,index) in fundsListData.data" :key="item.id">
						<checkbox :value="item.id.toString()" :checked="singleCheckboxStatus[index]" class="check_box" v-if="showCheckBox" />
						<text>{{$util.roundNumber(item.lock_amount,2)}}</text>
						<text>{{$util.FormatDate(item.create_time)}}</text>
						<view class="status__btn_handle" @click="onMiningBtn(item.id)">
							<text>挖矿</text>
						</view>
					</view>
				</checkbox-group>
			</view>
			<view class="list_content--footer" v-if="showCheckBox">
				<view>
					<text>总额：</text>
					<text class="mining_sum">{{fundsSum}}PCD</text>
				</view>
				<view>挖矿</view>
			</view>
		</view>
		<!-- 挖矿中 -->
		<view class="list_wrap" v-if="menuActive == 1">
			<view class="list_header">
				<text>数额(PCD)</text>
				<text>时间</text>
				<text>操作</text>
			</view>
			<view class="list_content">
				<view class="list_content--item" v-for="item in fundsListData.data" :key="item.id">
					<text>{{$util.roundNumber(item.mining_amout,2)}}</text>
					<text>{{$util.FormatDate(item.create_time)}}</text>
					<view class="status__btn_handle" @click="onUnlockBtn(item.id)">
						<text>解仓</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 解仓中 -->
		<view class="list_wrap" v-if="menuActive == 2">
			<view class="list_header">
				<text>数额(PCD)</text>
				<text>时间</text>
				<text>操作</text>
			</view>
			<view class="list_content">
				<view class="list_content--item" v-for="item in fundsListData.data" :key="item.id">
					<view class="item_amount">
						<text>{{$util.roundNumber(item.unlock_amount,2)}}</text>
						<text>({{$util.FormatStatus(item.status)}})</text>
					</view>
					<text>{{$util.FormatDate(item.create_time)}}</text>
					<view :class="{'status__btn_handle':true,'status__btn_disabled':item.status>=2}" @click="onRevokeBtn(item.id)">
						<text>撤销</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 解仓记录 -->
		<view class="list_wrap" v-if="menuActive == 3">
			<view class="list_header">
				<text>数额(PCD)</text>
				<text>时间</text>
				<text>状态</text>
			</view>
			<view class="list_content">
				<view class="list_content--item" v-for="item in fundsListData.data" :key="item.id">
					<view class="item_amount">
						<text>{{$util.roundNumber(item.unlock_amount,2)}}</text>
						<text v-if="item.status === 5">已退回可挖矿</text>
					</view>
					<text>{{$util.FormatDate(item.create_time)}}</text>
					<view class="handle_btn" @click="onViewReason(item)">
						<text>{{$util.FormatStatus(item.status)}}</text>
						<text v-if="item.status === 5">(查看原因)</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 分页 -->
		<view class="pagination_wrap">
			<view class="pagination_left" @click="onPagination('previous')">
				<uni-icon type="back" color="#999999" size="20"></uni-icon>
			</view>
			<view class="pagination_text">{{currentPage + '/' + sumPage}}</view>
			<view class="pagination_right" @click="onPagination('next')">
				<uni-icon type="forward" color="#999999" size="20"></uni-icon>
			</view>
		</view>
		<!-- 解仓对话框 -->
		<wx-dialog :showDialog="showFundsPassDialog">
			<template v-slot:dialogContent>
				<view class="dialog_wrap--fundsPass">
					<view class="dialog_title">确认资金密码</view>
					<view class="dialog_content">
						<input type="password" v-model="fondsPassword" placeholder="资金密码" />
						<text @click="resetFundsPass">重置资金密码</text>
					</view>
					<button type="warn" class="dialog_btn" @click="onFundsPassDialog('confirm')">确认</button>
					<button class="dialog_btn cancel_btn" @click="onFundsPassDialog('cancel')">取消</button>
				</view>
			</template>
		</wx-dialog>
		<!-- 查看驳回原因对话框 -->
		<wx-dialog :showDialog="showViewReasonDialog" direction="center">
			<template v-slot:dialogContent>
				<view class="dialog_wrap--reason">
					<view class="dialog_title">温馨提示</view>
					<view class="dialog_content">
						<text>抱歉，您的申请被驳回</text>
						<text>{{rejectReason}}</text>
					</view>
					<button type="warn" class="dialog_btn" @click="onViewReasonDialog">确定</button>
				</view>
			</template>
		</wx-dialog>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import wxDialog from "@/components/wx-dialog/wx-dialog.vue"
	export default {
		data() {
			return {
				menuList: ['可挖矿', '挖矿中', '解仓中', '解仓记录'], // 菜单列表
				menuActive: 0, // 当前选中菜单
				fundsListData: {}, // 当前列表数据
				showCheckBox: false, // 显示多选框
				chooseFundsList: [], // 选中的可挖矿ID
				allCheckboxStatus: false, // 所有多选框状态
				singleCheckboxStatus: [], // 单个多选框状态
				fundsSum: 0, // 资金总额
				currentPage: 1, // 当前页
				limitPage: 10, // 每页展示条数
				showFundsPassDialog: false, // 资金对话框
				showViewReasonDialog: false, // 驳回原因对话框
				fondsPassword: '', // 资金密码
				unlockId: '', //解仓数据ID
				rejectReason: '' // 申请驳回原因
			}
		},
		computed: {
			sumPage() {
				return this.fundsListData.count ? Math.ceil(this.fundsListData.count / this.limitPage) : 1
			}
		},
		onLoad(query) {
			switch (parseInt(query.id)) {
				case 1:
					this.getCanMining()
					this.menuActive = 0
					break;
				case 2:
					this.getMining()
					this.menuActive = 1
					break;
				case 3:
					this.getUnlock()
					this.menuActive = 2
					break;
				case 4:
					this.getUnlockHistory()
					this.menuActive = 3
					break;
			}
		},
		onPullDownRefresh() {
			switch (this.menuActive) {
				case 0:
					this.getCanMining()
					break;
				case 1:
					this.getMining()
					break;
				case 2:
					this.getUnlock()
					break;
				case 3:
					this.getUnlockHistory()
					break;
			}
		},
		methods: {
			// 修改菜单
			changeMenuTab(index) {
				this.currentPage = 1
				this.menuActive = index
				switch (index) {
					case 0:
						this.getCanMining()
						break;
					case 1:
						this.getMining()
						break;
					case 2:
						this.getUnlock()
						break;
					case 3:
						this.getUnlockHistory()
						break;
				}
			},
			// 可挖矿列表
			getCanMining() {
				this.$api.getCanMining({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type === 'ok') {
						this.fundsListData = res.data.message;
						this.fundsListData.data.forEach((item, index) => {
							this.singleCheckboxStatus.push(false)
						})
					}
				})
			},
			// 挖矿中列表
			getMining() {
				this.$api.getMining({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type === 'ok') {
						this.fundsListData = res.data.message
					}
				})
			},
			// 解仓中列表
			getUnlock() {
				this.$api.getUnlock({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type === 'ok') {
						this.fundsListData = res.data.message
					}
				})
			},
			// 解仓记录
			getUnlockHistory() {
				this.$api.getUnlockHistory({
					limit: this.limitPage,
					page: this.currentPage
				}, res => {
					uni.stopPullDownRefresh()
					if (res.data.type === 'ok') {
						this.fundsListData = res.data.message
					}
				})
			},
			// 监听挖矿按钮
			onMiningBtn(id) {
				this.$api.addMining({
					id: id
				}, res => {
					if (res.data.type === "ok") {
						this.getCanMining()
						uni.showToast({
							title: '资金已进入挖矿中',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			// 监听解仓按钮
			onUnlockBtn(id) {
				// 验证是否设置了资金密码
				this.$api.outMining({}, res => {
					if (res.data.type === "error") {
						this.showFundsPassDialog = true
						this.unlockId = id
					}
				})
			},
			// 资金密码验证
			onFundsPassDialog(arg) {
				if (arg === 'confirm') {
					if(this.fondsPassword === ''){
						uni.showToast({
							title: '资金密码不能为空',
							icon: 'none'
						})
						return
					}
					this.$api.verifyFundsPass({
						password: this.fondsPassword
					}, res => {
						if (res.data.type === "ok") {
							this.onUnlockRequest()
						} else {
							uni.showToast({
								title: '资金密码错误',
								icon: 'none'
							})
						}
					})
				} else {
					this.showFundsPassDialog = false
				}
				this.fondsPassword = ''
			},
			// 解仓请求
			onUnlockRequest() {
				uni.showLoading();
				this.$api.outMining({
					id: this.unlockId
				}, res => {
					uni.hideLoading();
					if (res.data.type === "ok") {
						this.getMining()
						this.showFundsPassDialog = false
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				})
			},
			// 监听解仓撤销按钮
			onRevokeBtn(id) {
				this.$api.outMiningRevoke({
					id: id
				}, res => {
					if (res.data.type === 'ok') {
						this.getUnlock()
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				})
			},
			// 监听批量按钮
			onBatchBtn() {
				// 如果showCheckBox===false,按钮显示批量，清空选中状态
				if (this.showCheckBox) {
					this.showCheckBox = false

				} else {
					this.showCheckBox = true
					this.allCheckboxStatus = false
				}
			},
			// 选择单独可挖矿
			chooseSingleFunds(val) {
				// 拿不到列表的index，只能去循环判断
				this.fundsListData.data.forEach((res, resIndex) => {
					val.detail.value.forEach((item, itemIndex) => {
						if (res.id === parseInt(item)) {
							this.singleCheckboxStatus[resIndex] = true
						} else {
							this.singleCheckboxStatus[resIndex] = false
						}
					})
				})
				// this.chooseFundsList = val.detail.value

				// 当前数组不等于当前总数据，说明没有全选
				const listLength = val.detail.value.length
				if (listLength !== this.fundsListData.data.length) {
					// 取消全选状态
					this.allCheckboxStatus = false
				} else {
					this.allCheckboxStatus = true
				}
				// todo 选择前和选择后分别加减总量
			},
			// 选择所有可挖矿
			chooseAllFunds(val) {
				if (val.detail.value.length !== 0) {
					this.fundsListData.data.forEach((item, index) => {
						// 单个多选框状态
						this.singleCheckboxStatus[index] = true
						// 加总额
						this.fundsSum += parseInt(item.lock_amount)
					})
					// 选中所有的数据
					this.chooseFundsList = this.fundsListData.data
					// 选中所有按钮
					this.allCheckboxStatus = true
				} else {
					this.fundsListData.data.forEach((item, index) => {
						this.singleCheckboxStatus[index] = false
					})
					// 清空选中列表
					this.chooseFundsList = []
					this.allCheckboxStatus = false
					// 总额清0
					this.fundsSum = 0
				}
			},
			// 分页
			onPagination(arg) {
				if (arg === "previous") {
					if (this.currentPage > 1) {
						this.currentPage--
					} else {
						return
					}
				} else {
					if (this.currentPage < this.sumPage) {
						this.currentPage++
					} else {
						uni.showToast({
							title: '没有更多了',
							icon: 'none'
						})
						return
					}
				}
				switch (this.menuActive) {
					case 0:
						this.getCanMining()
						break;
					case 1:
						this.getMining()
						break;
					case 2:
						this.getUnlock()
						break;
					case 3:
						this.getUnlockHistory()
						break;
				}
			},
			// 返回
			jumpBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 查看驳回原因
			onViewReason(item) {
				if (item.remark) {
					this.showViewReasonDialog = true
					this.rejectReason = item.remark
				}
			},
			// 申请驳回对话框确定按钮
			onViewReasonDialog() {
				this.showViewReasonDialog = false
			},
			// 重置资金密码
			resetFundsPass(){
				uni.showToast({
					title:"请联系客服重置密码",
					icon:'none'
				})
			}
		},
		components: {
			uniIcon,
			wxDialog
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-layout {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.funds-status_wrapper {
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
	}

	.nav_bar {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 140upx;
		line-height: 200upx;
		box-shadow: 2upx 0 10upx rgba(0, 0, 0, .2);
		background-color: #25263D;

		.nav_bar--title {
			font-size: 16px;
			color: #FFFFFF;
		}

		.nav_bar--btn {
			margin-right: 20upx;
		}
	}

	.menu_tab {
		position: fixed;
		top: 140upx;
		left: 0;
		width: 100%;
		height: 89upx;
		font-size: 13px;
		background-color: #25263D;
		@include flex-layout;

		.menu_tab--default {
			height: 89upx;
			line-height: 89upx;
			color: #999999;
			box-sizing: border-box;
		}

		.menu_tab--active {
			color: #E03E4D;
			border-bottom: 2px solid #E03E4D;
		}
	}

	.list_wrap {
		color: #333333;
		margin-top: 230upx;

		.list_header {
			width: 100%;
			height: 80upx;
			@include flex-layout;
			background-color: #EEEEEE;

			.check_box {
				transform: scale(0.7);
			}

			text {
				display: block;
				width: 33.33%;
				text-align: center;
			}
		}

		.list_content {
			height: 1000upx;
			overflow: auto;
			.list_content--item {
				height: 100upx;
				@include flex-layout;

				.check_box {
					transform: scale(0.7);
				}

				.item_amount {
					flex: 1;
					display: flex;
					flex-direction: column;

					text:last-child {
						color: #999999;
					}
				}

				text {
					flex: 1;
					text-align: center;
				}

				.handle_btn {
					flex: 1;
					display: flex;
					flex-direction: column;

					text {
						color: #E13E4D;
					}
				}

				.status__btn_handle {
					flex: 1;
					text-align: center;

					text {
						padding: 10upx 30upx;
						border-radius: 30upx;
						background-color: #E13E4D;
						color: #FFFFFF;
					}
				}

				.status__btn_disabled {
					flex: 1;
					text-align: center;

					text {
						padding: 10upx 30upx;
						border-radius: 30upx;
						background-color: #999999;
						color: #FFFFFF;
					}
				}

			}
		}

		.list_content--footer {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100upx;
			line-height: 100upx;
			width: 100%;
			box-shadow: 0 5upx 10upx rgba(0, 0, 0, .5);
			font-size: 15px;

			view:first-child {
				float: left;
				margin-left: 20upx;

				.mining_sum {
					color: #E13E4D;
				}
			}

			view:last-child {
				float: right;
				width: 30%;
				text-align: center;
				background-color: #E13E4D;
				color: #FFFFFF;
			}
		}
	}

	.pagination_wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		position: fixed;
		bottom: 110upx;
		left: 10%;

		.pagination_left,
		.pagination_right {
			padding: 0 10upx;
			border-radius: 10upx;
			border: 1px solid #BBBBBB;
		}
	}

	.dialog_wrap--fundsPass {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;

		.dialog_title {
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #E0DFDF;
			color: #666666;
			font-size: 15px;
		}

		.dialog_content {
			display: flex;
			justify-content: space-between;
			padding: 0 40upx;
			margin: 60upx 0;

			input {
				flex:1;
				height: 50upx;
				padding: 0 10upx;
				border-bottom: 1px solid #E0DFDF;
				text-align: center;
			}
			text{
				padding:10upx 30upx;
				background-color: #E03E4D;
				color:#FFFFFF;
				border-radius: 40upx;
			}

		}

		.dialog_btn {
			width: 90%;
			height: 70upx;
			line-height: 70upx;
			margin: 20upx auto;
			border-radius: 10upx;
			background-color: #E03E4D;
			font-size: 14px;
		}

		.cancel_btn {
			border: 1px solid #E03E4D;
			background-color: #FFFFFF;
			color: #E03E4D;
		}
	}

	.dialog_wrap--reason {
		width: 80%;
		height: 400upx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;

		.dialog_title {
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #25263D;
			color: #666666;
			font-size: 15px;
		}

		.dialog_content {
			height: 200upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			text:first-child {
				margin-bottom: 20upx;
				color: #E03E4D;
				font-size: 20px;
			}
		}

		.dialog_btn {
			width: 60%;
			height: 68upx;
			line-height: 60upx;
			margin: 20upx auto;
			border-radius: 68upx;
			background-color: #E03E4D;
			font-size: 14px;
		}
	}
</style>
